<template>
	<div class="paper-content" @touchmove.prevent>
		<div v-if="show_guide" class="guide-mask" @click="hideGuide"></div>
		<div class="guide" v-if="show_guide">
			<img class="guide-img" :src="guide" />
			<img class="guide-img3" :src="guide3" />
		</div>
		<div class="paper" id="download">
			<img :src="base_img" class="bg-img" width="100%" height="100%"/>
			<div class="logo-wrap">
				<img :src="bg_logo" class="bg-logo"/>
			</div>
			<div class="paper-background">
				<img class="paper-background-top" :src="top_bg"/>
				<img class="paper-background-bottom" :src="bottom_bg"/>
				<img class="paper-background-box" :src="box_img"/>
				<img class="paper-background-text" :src="text_img"/>
			</div>
		</div>
		<div class="footer" v-if="show_choice">
			<div class="footer-tab">
				<div
					v-for="item in tabList"
					:key="item.id"
					>
					<img
						class="" 
						@click="toggleNav(item.id)"
						width="70"
						:src="item.id == navActive ? item.acimg : item.img"/>
				</div>
				<img class="preview" width="70" @click="showChoice(false)" :src="preview" />
			</div>
			<div class="footer-choice">
				<div v-if="navActive == 1" class="footer-choice-item">
					<div
						v-for="item in textIconList"
						:key="item.id"
						class="footer-choice-item-icon" 
						@click="changeText(item.id)"  >
						<img width="80" height="80" fit="scale-down" :src="item.img" />
						<img v-if="item.id == textActiveIndex" class="selected" :src="selected" />
					</div>
				</div>
				<div v-if="navActive == 2" class="footer-choice-item">
					<div
						v-for="item in boxIconList"
						:key="item.id"
						class="footer-choice-item-icon" 
						@click="changeBox(item.id)" >
						<img width="80" height="80" fit="scale-down" :src="item.img" />
						<img v-if="item.id == bottomActiveIndex" class="selected" :src="selected" />
					</div>
				</div>
				<div v-if="navActive == 3" class="footer-choice-item">
					<div
						v-for="item in topIconList"
						:key="item.id"
						class="footer-choice-item-icon" 
						@click="changeTop(item.id)" >
						<img width="80" height="80" fit="scale-down" :src="item.img" />
						<img v-if="item.id == topActiveIndex" class="selected" :src="selected" />
					</div>
				</div>
				<div v-if="navActive == 4" class="footer-choice-item">
					<div 
						v-for="item in bottomIconList"
						:key="item.id"
						class="footer-choice-item-icon" 
						@click="changeBottom(item.id)" >
						<img width="80" height="80" fit="scale-down" :src="item.img" />
						<img v-show="item.id == bottomActiveIndex" class="selected" :src="selected" />
					</div>
				</div>
				<img @click="onDownloadPic" width="110" :src="next_button" />
			</div>
		</div>
		<div class="show-preview" v-else @click="showChoice(true)">
			<van-image width="80" :src="show_preview" fit="scale-down"></van-image>
		</div>
	</div>
</template>

<script>
	import { Image, Button } from "vant";
	import html2canvas from "html2canvas"
	export default{
		name: "calendar",
		components: {
			[Image.name]: Image,
			[Button.name]: Button
		},
		data() {
		  return {
			base_img: require('../assets/bg-cut.png'),
			bg_logo: require('../assets/bg-logo.png'),
			// base_img: 'http://h5static.weiyoho.com/assets/bg-cut.png',
			show_guide: true,
			guide: 'http://h5static.weiyoho.com/assets/guide-1.png',
			guide3: 'http://h5static.weiyoho.com/assets/guide-3.png',
			// currentIndex: 1,
			textActiveIndex: 1,
			boxActiveIndex: 1,
			topActiveIndex: 1,
			bottomActiveIndex: 1,
			navActive: 1,
			show_choice: true,
			preview: 'http://h5static.weiyoho.com/assets/paper/preview.png',
			show_preview: 'http://h5static.weiyoho.com/assets/paper/show-preview.png',
			selected: 'http://h5static.weiyoho.com/assets/picture/sel.png',
			bottom_bg: '',
			top_bg: '',
			box_img: '',
			text_img: '',
			next_button: 'http://h5static.weiyoho.com/assets/paper/next.png',
			tabList:[
				{ 
					id: 1,
					img: 'http://h5static.weiyoho.com/assets/paper/element-1.png',
					acimg: 'http://h5static.weiyoho.com/assets/paper/element-1-sel.png',
				},
				{ 
					id: 2, 
					img: 'http://h5static.weiyoho.com/assets/paper/element-2.png',
					acimg: 'http://h5static.weiyoho.com/assets/paper/element-2-sel.png',
				},
				{ 
					id: 3, 
					img: 'http://h5static.weiyoho.com/assets/paper/element-3.png' ,
					acimg: 'http://h5static.weiyoho.com/assets/paper/element-3-sel.png',
				},
				{ 
					id: 4, 
					img: 'http://h5static.weiyoho.com/assets/paper/element-4.png',
					 acimg: 'http://h5static.weiyoho.com/assets/paper/element-4-sel.png',
				}
			],
			boxList:[
				{
					id: 1,
					img: require('../assets/paper/box-1.png'),
				},
				{
					id: 2,
					img: require('../assets/paper/box-2.png'),
				},
				{
					id: 3,
					img: require('../assets/paper/box-3.png'),
				}
			],
			boxIconList:[
				{
					id: 1,
					img: 'http://h5static.weiyoho.com/assets/paper/sel-box-1.png'
				},
				{
					id: 2,
					img: 'http://h5static.weiyoho.com/assets/paper/sel-box-2.png'
				},
				{
					id: 3,
					img: 'http://h5static.weiyoho.com/assets/paper/sel-box-3.png'
				}
			],
			textList:[
				{
					id: 1,
					img: require('../assets/paper/text-1.png'),
				},
				{
					id: 2,
					img: require('../assets/paper/text-2.png'),
				},
				{
					id: 3,
					img: require('../assets/paper/text-3.png'),
				}
			],
			textIconList:[
				{
					id: 1,
					img: 'http://h5static.weiyoho.com/assets/paper/sel-text-1.png'
				},
				{
					id: 2,
					img: 'http://h5static.weiyoho.com/assets/paper/sel-text-2.png'
				},
				{
					id: 3,
					img: 'http://h5static.weiyoho.com/assets/paper/sel-text-3.png'
				}
			],
			topList:[
				{
					id: 1,
					img: require('../assets/paper/top-fan.png'),
				},
				{
					id: 2,
					img: require('../assets/paper/top-knot.png'),
				},
				{
					id: 3,
					img: require('../assets/paper/top-lantern.png'),
				}
			],
			topIconList:[
				{
					id: 1,
					img: 'http://h5static.weiyoho.com/assets/paper/sel-top-1.png'
				},
				{
					id: 2,
					img: 'http://h5static.weiyoho.com/assets/paper/sel-top-2.png'
				},
				{
					id: 3,
					img: 'http://h5static.weiyoho.com/assets/paper/sel-top-3.png'
				}
			],
			bottomList:[
				{
					id: 1,
					img: require('../assets/paper/down-fish.png'),
				},
				{
					id: 2,
					img: require('../assets/paper/down-mouse.png'),
				},
				{
					id: 3,
					img: require('../assets/paper/down-peony.png'),
				}
			],
			bottomIconList:[
				{
					id: 1,
					img: 'http://h5static.weiyoho.com/assets/paper/sel-bottom-1.png'
				},
				{
					id: 2,
					img: 'http://h5static.weiyoho.com/assets/paper/sel-bottom-2.png'
				},
				{
					id: 3,
					img: 'http://h5static.weiyoho.com/assets/paper/sel-bottom-3.png'
				}
			]
		  };
		},
		mounted() {
			this.top_bg = this.topList[0].img;
			this.bottom_bg = this.bottomList[0].img;
			this.box_img = this.boxList[0].img;
			this.text_img = this.textList[0].img;
			localStorage.getItem("PAPER") ? this.show_guide = false : localStorage.setItem("PAPER", 1);
		},
		methods:{
			onDownloadPic() {
				html2canvas(document.querySelector("#download"), {
					useCORS: true,
					backgroundColor: null
					// scale: 2,
				}).then(canvas => {
					this.downloadUrl = canvas.toDataURL("image/jpeg");
					// localStorage.setItem("CANVAS_IMAGE", this.downloadUrl);
					this.$store.commit("updateDownloadImg", this.downloadUrl);
					this.$router.replace({ name: 'paperBlessing', params: { downloadImg: this.downloadUrl }});
				});
			},
			toggleNav(index){
				this.navActive = index
			},
			changeTop(index){
				this.topActiveIndex = index
				this.top_bg = this.topList[--index].img
			},
			changeBottom(index){
				console.log(index)
				this.bottomActiveIndex = index
				this.bottom_bg = this.bottomList[--index].img
			},
			changeBox(index){
				this.bottomActiveIndex = index
				this.box_img = this.boxList[--index].img
			},
			changeText(index){
				this.textActiveIndex = index
				this.text_img = this.textList[--index].img
			},
			showChoice(flag){
				this.show_choice = flag
			},
			hideGuide(){
				this.show_guide = false
			},
			/**
			 * @desc 跳转页面
			 */
			pageTo(url){
				// this.onDownloadPic();
				this.$router.replace(url)
			},
			onClickLeft() {
				this.$router.back();
			}
		}
	}
</script>

<style lang="less" scoped="scoped">
	.paper-content{
		box-sizing: border-box;
		height: 100vh;
		overflow: hidden;
		.guide-mask{
			width: 100vw;
			height: 100vh;
			position: absolute;
			background-color: #000000;
			opacity: 0.7;
			top: 0;
			left: 0;
			z-index: 999;
		}
		.guide-img{
			position: absolute;
			left: 0;
			bottom: 33vh;
			width: 180px;
			z-index: 999;
		}
		.guide-img3{
			position: absolute;
			right: 0;
			bottom: 15vh;
			width: 180px;
			z-index: 999;
		}
		.paper{
			position: relative;
			width: 100vw;
			height: 100vh;
			// background: url(../assets/bg-cut.png) no-repeat;
			// background-size: 100% 100%;
			overflow: hidden;
			.bg-img {
				position: absolute;
				top: 0;
				left: 0;
				right: 0;
				bottom: 0;
				z-index: 1;
			}
			.logo-wrap {
				width: 100vw;
				display: flex;
				justify-content: center;
				position: absolute;
				top: 11vh;
				z-index: 2;

				.bg-logo {
					width: 97px;
					height: 32px;
				}
			}
			&-background{
				position: absolute;
				top: 0;
				left: 0;
				right: 0;
				bottom: 0;
				width: 100%;
				height: 100vh;
				overflow: hidden;
				z-index: 2;
				&-top{
					position: absolute;
					width: 100%;
					height: 100vh;
					overflow: hidden;
					left: 0;
					top: 0;
					z-index: 2;
				}
				&-bottom{
					position: absolute;
					height: 100vh;
					overflow: hidden;
					width: 100%;
					left: 0;
					bottom: 0;
					z-index: 2;
				}
				&-box{
					position: absolute;
					width: 100vw;
					height: 100vh;
					overflow: hidden;
					left: 0;
					top: 0;
					z-index: 2;
				}
				&-text{
					position: absolute;
					width: 100%;
					height: 100vh;
					left: 0;
					top: 0;
					z-index: 3;
				}
			}
		}
		.footer{
			position: absolute;
			bottom: -10px;
			left: 0;
			width: 100%;
			z-index: 99;
			&-tab{
				position: position;
				width: 100%;
				left: 0;
				bottom: 0;
				display: flex;
			}
			&-choice{
				position: relative;
				top: -10px;
				bottom: 0;
				padding: 10px;
				background: url(../assets/paper/popup.png) no-repeat;
				background-size: 100% 100%;
				&-item{
					display: flex;
					flex-direction: row;
					justify-content: space-around;
					padding-bottom: 10px;
					&-icon{
						position: relative;
						width: 80px;
						height: 80px;
					}
				}
			}
			.selected{
				width: 20px;
				height: 20px;
				position: absolute;
				top: 65px;
				right: 20px;
			}
		}
		.preview{
			position: absolute;
			top: -3px;
			right: 0;
		}
		.show-preview{
			position: absolute;
			bottom: 10px;
			right: 10px;
			z-index: 99;
		}
	}
</style>
